<template>
  <div>
    <div class="operation">
      <PageTools>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="工单编号">
            <el-input
              v-model="formInline.taskCode"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
          <el-form-item label="工单状态">
            <el-select
              v-model="formInline.status"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in statusList"
                :key="item.statusId"
                :label="item.statusName"
                :value="item.statusId"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="Search"
            >查询</el-button>
          </el-form-item>
        </el-form>
      </PageTools>
      <el-card class="main">
        <el-button
          style="margin-bottom: 10px"
          type="primary"
          size="small"
          icon="el-icon-circle-plus-outline"
          @click="addForm"
        >新建</el-button>
        <!-- 表格 -->
        <el-table
          v-loading="loading"
          :data="list"
          style="width: 100%"
          :header-cell-style="{
            //标题头部的颜色
            //'text-align': 'center',
            fontWeight: 'normal',
            background: '#f3f6fb',
            // color: 'black',
          }"
        >
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column label="工单编号" prop="taskCode" name="taskCode" />
          <el-table-column label="设备编号" prop="innerCode" name="innerCode" />
          <el-table-column label="工单类型" prop="taskType.typeName" />
          <el-table-column
            label="工单方式"
            prop="createType"
            :formatter="createType"
          />
          <el-table-column
            label="工单状态"
            prop="taskStatusTypeEntity.statusName"
          />
          <el-table-column label="运营人员" prop="userName" />
          <el-table-column
            label="创建日期"
            prop="updateTime"
            :formatter="updateTime"
            width="170"
          />
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                size="small"
                @click="detailsFn(row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="space-between" align="middle">
          <el-col :span="19">
            <p class="paginationHeader">
              {{
                `共${page.totalCount}条记录 第${page.pageIndex}/${page.totalPage}页`
              }}
            </p>
          </el-col>
          <el-col :span="5">
            <el-pagination
              background
              :current-page="page.pageIndex"
              :page-size="page.pageSize"
              :total="page.totalCount"
              layout="prev,next"
              prev-text="上一页"
              next-text="下一页"
              @current-change="changePage"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>
    <AddFroms :dialog-form-visible="dialogFormVisible" :is-show="false" @closeFn="closeFn" />
    <!-- 查看详情 -->
    <DetailsFrom :is-show="isShow" :is-finally="false" :details-visible="detailsVisible" :item="detailsItem" @detailsClose="detailsClose" @cancelList="cancelList" />
  </div>
</template>

<script>
import AddFroms from '@/views/Task/components/addForm.vue'
import DetailsFrom from '@/views/Task/components/details-from.vue'
import { allTaskStatus, taskSearch } from '@/api/task'
export default {
  components: { AddFroms, DetailsFrom },
  data() {
    return {
      formInline: {
        taskCode: '',
        status: ''
      },
      statusList: '', // 工单状态下拉列表
      list: [],
      page: {
        // 页码
        totalCount: 0, // 总记录
        pageIndex: 1, // 当前页
        pageSize: 10, // 页码显示数据
        totalPage: 0, // 总页数
        isRepair: true,
        status: null
      },
      dialogFormVisible: false, // 新增表单弹出层显示和隐藏
      detailsVisible: false, // 表格查看详情--工单详情
      detailsItem: {}, // 把点击详情每一行传递给子组件
      isShow: true, // 为了让工单详情的补货详情不显示
      loading: false
    }
  },
  created() {
    this.allTaskStatus()
    this.taskSearch()
  },
  methods: {
    // 1.工单状态
    async allTaskStatus() {
      const { data } = await allTaskStatus()
      this.statusList = data
    },
    // 2.查询
    Search() {
      this.taskSearch()
    },
    // 3.新增
    addForm() {
      this.dialogFormVisible = true
    },
    // 3.1.关闭新增弹出层
    closeFn() { this.dialogFormVisible = false },
    // 4.表格
    async taskSearch() {
      this.loading = true
      const { data } = await taskSearch({ ...this.page, ...this.formInline })
      this.list = data.currentPageRecords
      this.loading = false
      this.page.totalCount = Number(data.totalCount)
      this.page.pageIndex = Number(data.pageIndex)
      this.page.pageSize = Number(data.pageSize)
      this.page.totalPage = Number(data.totalPage)
    },
    // 4.1.分页的当前页码如果到下一页就请求下一页数据
    changePage(index) {
      this.page.pageIndex = index
      this.taskSearch()
    },
    // 4.2.工单方式的转换0,1转换成文字
    createType(row, column, callValue, index) {
      if (callValue === 1) {
        return '手动'
      } else {
        return '自动'
      }
    },
    // 4.3.将创建时间的类型转换一下
    // 数据库操作时间类型为：datetime 类型--需要把toLocaleString()转换
    // 响应给前端，前端接收显示为：2022-03-18T01:46:08.000+00:00 这种加了时区的格式
    updateTime(row, column, callValue, index) {
      const time = new Date(callValue).toLocaleString()
      return time
    },
    // 5.表格查看详情
    detailsFn(row) {
      this.isShow = false
      this.detailsItem = row
      this.detailsVisible = true
    },
    // 5.1关闭查看详情
    detailsClose() {
      console.log('确定通知我关闭')
      this.taskSearch()
      this.detailsVisible = false
    },
    // 5.2.待办的工单详情-触发父亲取关闭弹出层-并且从新属性表格数据
    cancelList() {
      console.log('我是子组件的工单取消')
      this.page.status = 1
      this.taskSearch()
      this.detailsVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.operation {
  .demo-form-inline {
    margin-top: 20px;
    color: #606266;
    font-size: 14px;
    font-weight: normal;
    .el-button--primary {
      background-color: #5f84ff;
      height: 36px;
      padding: 0;
      text-align: center;
      min-width: 80px;
    }
  }
}
.main {
  margin: 20px;
  // padding: 17px;
  .el-button--primary {
    background: linear-gradient(135deg, #ff9743, #ff5e20);
    border: unset;
    height: 36px;
    width: 80px !important;
  }
  .el-button--success {
    background-color: #fbf4f0 !important;
    border: none;
    color: #655b56 !important;
    height: 36px;
    width: 80px !important;
  }
   .paginationHeader {
    font-size: 16px;
    color: #dbdfe5;
    padding-left: 8px;
  }
   .el-pagination{
  padding-left: 22px;
 }
  .el-pagination button:disabled {
    width: 70px;
    height: 32px;
  }
  .el-pagination .btn-next,
  .el-pagination .btn-prev {
    width: 70px;
    height: 32px;
  }
  .el-table__row {
    height: 44px;
  }
  .el-table {
    position: unset;
  }
  .el-table thead {
    color: #666666 !important;
  }
  .el-table td,
  .el-table th.is-leaf {
    border-bottom: 0 !important;
  }
  .el-table--fit {
    margin-top: 10px;
  }
  .el-table td {
    padding: 0px;
  }
}
</style>
